<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style>
	@import url(../index/src/css/index.css);
</style>
<script language="javascript" src="../index/src/js/jquery-2.1.4.js"></script>
<script src="../index/src/js/jquery.flexslider-min.js"></script>
</head>
<body>
<div class="container">
	<div class="slidecontainer">
		<ul class="slides">
			<li><a href="./diary" target="_blank"><img src="../index/src/img/index/1.jpg" alt=""></a></li>
			<li><a href="./diary" target="_blank"><img src="../index/src/img/index/2.jpg" alt=""></a></li>
			<li><a href="./diary" target="_blank"><img src="../index/src/img/index/3.jpg" alt=""></a></li>
			<li><a href="./diary" target="_blank"><img src="../index/src/img/index/4.jpg" alt=""></a></li>
			<!--li><a href="./diary" target="_blank"><img src="../index/src/img/index/5.jpg" alt=""></a></li-->
		</ul>
		<ul class="slide-caption">
			<li><a href="javascript:">name0</a></li>
			<li><a href="javascript:">name1</a></li>
			<li><a href="javascript:">name2</a></li>
			<li><a href="javascript:">name3</a></li>
			<!--li><a href="javascript:">name4</a></li-->
		</ul>
	</div>
	<p></p><br>
	<div class="eve">
		<font id="etitle">近期事件</font>
		<ul class="events">
			<li>
				<a href="./diary">事件01</a><br>
				<font class="edata">2017.10.01</font>
				<p class="indent">
					事件描述
				</p>
			</li>
		</ul>
	</div>
</div>
<script language="javascript">
	$(window).load(function() {
	$('.slidecontainer').flexslider({
		animation: 'slide',
		pauseOnHover: true,
		directionNav: false,
		manualControls: '.slide-caption li'
	});

	var $item = $('.slide-caption').find('li');
	$item.each(function(i) {
		var $this = $(this);
		$this.on('mouseenter', function() {
			$this.trigger('click');
		});
	});
});
</script>
</body>
</html>
